<template>
   <div class="app-container">
      <div class="head-container">
         <a-form :model="queryParams" ref="queryRef" v-show="showSearch" layout="inline">
            <a-form-item label="用户名称" prop="userName">
               <a-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
                  @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item label="手机号码" prop="phonenumber">
               <a-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"
                  @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item>
               <a-button type="primary" icon="Search" @click="handleQuery">搜索</a-button>
               <a-button icon="Refresh" @click="resetQuery">重置</a-button>
            </a-form-item>
         </a-form>
      </div>
      <div class="main-container">
         <div class="main-toolbar">
            <a-row :gutter="10" class="mb8">
               <a-col :span="1.5">
                  <a-button type="primary" plain icon="Plus" @click="openSelectUser">添加用户</a-button>
               </a-col>
               <a-col :span="1.5">
                  <a-button status="danger" plain icon="CircleClose" :disabled="selectedKeys.length <= 0"
                     @click="cancelAuthUserAll">批量取消授权</a-button>
               </a-col>
               <a-col :span="1.5">
                  <a-button status="warning" plain icon="Close" @click="handleClose">关闭</a-button>
               </a-col>
            </a-row>
         </div>
         <div class="main-content">
            <a-table :columns="columns"
               :data="userList" 
               @selection-change="handleSelectionChange"
               :row-selection="{ type: 'checkbox', showCheckedAll: true }">
            </a-table>
         </div>
      </div>
      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
   </div>
</template>

<script setup name="AuthUser">
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
import selectUser from "./selectUser";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const userList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const multiple = ref(true);
const total = ref(0);
const userIds = ref([]);

const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
   roleId: route.params.roleId,
   userName: undefined,
   phonenumber: undefined,
});


const columns = ref([
   { key: 0, title: "用户名称", dataIndex: "userName" },
   { key: 1, title: "用户昵称", dataIndex: "nickName" },
   { key: 2, title: "邮箱", dataIndex: "email" },
   { key: 3, title: "手机", dataIndex: "phonenumber" },
   { key: 4, title: "状态", dataIndex: "status", ellipsis: true, slotName: "status" },
   { key: 5, title: "上次登录时间", dataIndex: "loginDate" },
])
const selectedKeys = ref([])
/** 查询授权用户列表 */
function getList() {
   loading.value = true;
   allocatedUserList(queryParams).then(({ data }) => {
      userList.value = data.rows;
      total.value = data.total;
      loading.value = false;
   });
}
// 返回按钮
function handleClose() {
   router.push({ path: "/system/role" });
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.pageNum = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
   selectedKeys.value = selection
}
/** 打开授权用户表弹窗 */
function openSelectUser() {
   proxy.$refs["selectRef"].show();
}
/** 取消授权按钮操作 */
function cancelAuthUser(row) {
   proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
      return authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
   }).catch(() => { });
}
/** 批量取消授权按钮操作 */
function cancelAuthUserAll(row) {
   const roleId = queryParams.roleId;
   const uIds = userIds.value.join(",");
   proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
      return authUserCancelAll({ roleId: roleId, userIds: uIds });
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
   }).catch(() => { });
}

getList();
</script>
